<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>树形菜单</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./libs/HttpRequest.js"></script>
    <script src="./libs/TreeUtils.js"></script>
    <script src="./libs/StyleUtils.js"></script>
</head>
<body>
    <div class="container">
        <div class="main">
            <div class="content">
                <ul>
                    <li><a class="demo" href="">《时间简史》</a></li>
                    <li><a href="">《文化苦旅》</a></li>
                    <li><a href="">《山居笔记》</a></li>
                    <li><a href="">《行者无疆》</a></li>
                    <li><a href="">《借我一生》</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="app"></div>

    <script type="text/javascript">
        debugger
        const httpRequest = new HttpRequest()
        console.log(httpRequest)
        /**
         * 登录接口
         * @param params
         * @returns {*}
         */
        let getData = () => {
            return httpRequest.getRequest({
                url: 'json/data.json',
                method: 'get'
            })
        }
        var vm = new Vue({
            el: "#app",
            data(){
                return{

                }
            },
            mounted(){
                this.init()
            },
            methods:{
                init:async function(){
                    const data = await getData();
                    data.forEach(item => {
                        item.id = item.ID
                        item.parentId = item.PARENT
                    })
                    const list = getTrees(data,'#')
                    console.log(list)
                }
            }
        })

        const el = document.getElementsByClassName("demo")[0]
        // const demo = el.querySelector(".demo")
        const parent = getSpecifyParent(el,'class',"container")
        console.log(parent)
    </script>
</body>
</html>